<template>
	<view class="search">
		<view class="nav">
			<view :class="['item',type == 1? 'xz' : '']" @click="cut(1)">作品<text></text></view>
			<view :class="['item',type == 2? 'xz' : '']" @click="cut(2)">用户<text></text></view>
		</view>
		<view v-if="type == 1 && List.length" class="works">
			<view class="grid-item" v-for="(v,i) in List" :key="i" @click="goTo(v)">
				<image class="cover-img" :src="v.image" mode="aspectFill"></image>
				<view class="msg">
					<view class="title u-line-2">
						{{v.title}}
					</view>
					<view class="info">
						<image :src="v.user.avatar" mode="scaleToFill"></image>
						<text>{{v.user.nickname}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="type == 2 && List.length" class="user">
			<view class="item" v-for="(v,i) in List" :key="i" @click="navigateTo(`/pages/index/space?id=${v.id}`)">
				<view class="left">
					<image :src="v.avatar" mode="scaleToFill"></image>
					<view class="msg">
						<view class="name">{{v.nickname}}</view>
						<view class="id">ID：{{v.id}}</view>
					</view>
				</view>
				<view :class="['right',v.is_favorite == 1?'xz':'']" @click.stop="doFavorite(v,i)">
					{{v.is_favorite == 1? "已关注" : "关注"}}
				</view>
			</view>
		</view>
		<nullPage v-else title="暂无搜索结果"></nullPage>
	</view>
</template>

<script>
	import nullPage from "@/components/nullPage.vue"
	export default {
		components: {
			nullPage
		},
		data() {
			return {
				type: 1, //1作品 2用户
				total: 0,
				List: [],
				page: 1,
				title: "",
			}
		},
		onLoad(options) {
			// console.log(options);
			this.title = options.title
			this.getWorkList()
		},
		methods: {
			cut(type) {
				this.type = type
				this.total = 0
				this.page = 1
				this.List = []
				if (this.type == 1) {
					this.getWorkList()
				} else {
					this.getUserList()
				}
			},
			//关注/取消关注
			async doFavorite(data, index) {
				this.List[index].is_favorite = this.List[index].is_favorite == 1 ? 0 : 1
				let res = await this.$http("api/common/doFavorite", {
					type: 2, //true	int		1作品2用户
					work_type: 0, //false	int		默认可以传0,type等于1需要传,作品操作类型 1收藏 2点赞
					tbl_id: data.id, //true	int		作品id或用户id 取消收藏多个id用,拼接
				})
				// console.log(res);
				if (res.code != 200) {
					this.List[index].is_favorite = this.List[index].is_favorite == 1 ? 0 : 1
				}
			},
			// 前往详情页面
			async goTo(data) {
				let res = await this.$http("api/work/getWorkInfo", {
					id: data.id
				}, "GET")
				if (res.code == 200) {
					if (res.result.is_unlock) {
						this.navigateTo(`/pages/index/content?id=${res.result.id}`)
					} else {
						this.navigateTo(`/pages/index/unlock?id=${res.result.id}`)
					}
				}
			},
			// 用户列表
			async getUserList() {
				let res = await this.$http("api/work/getUserList", {
					title: this.title, //true	string		名称/id 搜索字段
					page: this.page, //true	int		当前页
					size: 30, //true	int		每页多少条
				}, "GET")
				if (res.code == 200) {
					this.List = this.List.concat(res.result.data)
					this.total = res.result.total
				}
			},
			// 获取作品
			async getWorkList() {
				let res = await this.$http("api/work/getWorkList", {
					title: this.title, //true	string		口令/名称 搜索字段
					category_id: "", //false	int		分类id
					page: this.page, //true	int		当前页
					size: 10, //true	int		每页多少条
					// #ifdef MP-TOUTIAO
					auth_type: 1, //请求来源 1抖音 2微信 3快手 4手机h5
					// #endif
					// #ifdef MP-WEIXIN
					auth_type: 2, //请求来源 1抖音 2微信 3快手 4手机h5
					// #endif
					// #ifdef H5
					auth_type: 4, //请求来源 1抖音 2微信 3快手 4手机h5
					// #endif
				}, "GET")
				this.List = this.List.concat(res.result.data)
				this.total = res.result.total
			},
		},
		onReachBottom() {
			if (this.List.length >= this.total) return
			this.page += 1
			if (this.type == 1) {
				this.getWorkList()
			} else {
				this.getUserList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		.nav {
			// position: fixed;
			// top: 88rpx;
			// left: 50%;
			// transform: translateX(-50%);
			display: flex;
			// width: 100%;
			height: 60rpx;
			padding: 16rpx 32rpx 0;
			box-sizing: border-box;
			border-bottom: 2rpx solid #ECECEC;

			.item {
				font-weight: bold;
				font-size: 28rpx;
				color: #8D8F90;
				margin-right: 48rpx;
				line-height: 1;
			}

			.xz {
				position: relative;
				color: #333333;

				text {
					position: absolute;
					left: 50%;
					bottom: -4rpx;
					transform: translateX(-50%);
					display: block;
					width: 30rpx;
					height: 6rpx;
					background-color: #333333;
					border-radius: 4rpx;
				}
			}
		}

		.works {
			padding: 20rpx 32rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-column-gap: 18rpx;
			grid-row-gap: 16rpx;

			.grid-item {
				// break-inside: avoid;
				// width: 334rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				// margin-bottom: 16rpx;
				padding: 8rpx;
				box-sizing: border-box;
				box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);

				.cover-img {
					display: block;
					width: 100%;
					height: 392rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.msg {
					width: 100%;

					.title {
						font-weight: bold;
						font-size: 24rpx;
						line-height: 36rpx;
						color: #333333;
						letter-spacing: 2rpx;
						padding: 8rpx;
					}

					.info {
						display: flex;
						align-items: center;
						padding-bottom: 8rpx;

						image {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
						}

						text {
							padding-left: 8rpx;
							font-weight: bold;
							font-size: 20rpx;
							color: #8D8F90;
						}
					}
				}
			}
		}

		.user {
			padding: 20rpx 0;

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 140rpx;
				padding: 0 32rpx;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.msg {
						padding: 0 16rpx;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							padding-bottom: 12rpx;
						}

						.id {
							font-weight: 500;
							font-size: 24rpx;
							color: #8D8F90;
						}
					}
				}

				.right {
					width: 152rpx;
					height: 56rpx;
					background: #FF504A;
					border-radius: 12rpx;
					line-height: 56rpx;
					text-align: center;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.xz {
					background: #F6F6F4;
					color: #333333;
				}
			}
		}
	}
</style>